/**
 * 单选开关
 * @returns {JSX.Element}
 * @constructor
 */

export default function Checkbox2(){

  return (
    <div className="flex h-screen items-center justify-center bg-gradient-to-tr from-emerald-500 to-purple-500">
      <div className="relative bg-white/50 p-5 w-[160px] h-[80px] rounded-[50px] pt-[15px] has-[:checked]:bg-green-500">
        <input type="checkbox"
               className="absolute inset-0 z-50 cursor-pointer appearance-none opacity-0 rounded-[50px] peer"/>
        <span className="absolute left-5 rounded-full bg-white duration-300 size-[50px] peer-checked:left-[90px]"></span>
      </div>
    </div>
  )
}
